<template>
    <div>
        <div class="filter-container">
            <el-form label-position="top" :inline="true">
                <el-form-item label="玩家渠道">
                    <select-app-source v-model="search.source"></select-app-source>
                </el-form-item>
<!--                <el-form-item label="活动ID">-->
<!--                    <el-input type="number" clearable v-model="search.cpl_activity_issue_id" placeholder="" style="width:100px"/>-->
<!--                </el-form-item>-->
                <el-form-item label="玩家ID">
                    <el-input type="textarea" autosize v-model="search.player_id" placeholder="多ID使用回车换行"/>
                </el-form-item>
                <el-form-item label="三方ID">
                    <el-input type="textarea" autosize v-model="search.third_id" placeholder="多ID使用回车换行"/>
                </el-form-item>
                <el-form-item label="时间类型">
                    <el-select v-model="search.timeField" clearable class="filter-item" placeholder="选择时间" style="width: 120px;">
                        <el-option label="激活时间" value="active_at"></el-option>
                        <el-option label="创建时间" value="created_at"></el-option>
                        <el-option label="更新时间" value="updated_at"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="-">
                    <picker-datetime-range v-model="search.timeRange"></picker-datetime-range>
                </el-form-item>
<!--                <el-form-item label="用户Flag">-->
<!--                    <el-select class="filter-item" v-model="search.flagBit" multiple collapse-tags placeholder="请选择" style="width: 140px;">-->
<!--                        <el-option-->
<!--                            v-for="item in options.flagBit"-->
<!--                            :key="item.value"-->
<!--                            :label="item.label"-->
<!--                            :value="item.value">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="状态" prop="status">-->
<!--                    <el-popover-->
<!--                        placement="top-start"-->
<!--                        title="活动状态筛选"-->
<!--                        width="200"-->
<!--                        trigger="hover"-->
<!--                        content="开启此选项表示只查看正在进行中的活动的用户数据。">-->
<!--                        <template slot-cfg="reference">-->
<!--                            <el-switch v-model="search.status" :active-value="1" :inactive-value="0"></el-switch>-->
<!--                        </template>-->
<!--                    </el-popover>-->
<!--                </el-form-item>-->
                <el-form-item label="-">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="pageNo = 1;handleSearch()">搜索</el-button>
                    <el-button class="filter-item" @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</el-button>
                </el-form-item>
            </el-form>
        </div>

<!--        <vxe-toolbar ref="xToolbar" custom>-->
<!--            <template #tools>-->
<!--                <vxe-button @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</vxe-button>-->
<!--            </template>-->
<!--        </vxe-toolbar>-->
        <vxe-table
            :loading="loading"
            ref="xTable"
            highlight-hover-row
            style="width: 100%"
            class="text-center"
            :max-height="maxHeight">
            <vxe-table-column title="渠道" field="source" width="120" formatter="formatAppSourceName"/>
            <vxe-table-column title="活动ID" field="cpl_activity_issue_id" width="80"/>
            <vxe-table-column title="玩家ID" field="player_id" width="80"/>
            <vxe-table-column title="三方ID" field="third_id" width="80"/>
            <vxe-table-column title="昵称" field="nickname" width="100" show-overflow="tooltip"/>
            <vxe-table-column title="奶酪" field="gold_sum" formatter="formatHuman" sortable width="100"/>
            <vxe-table-column title="棒棒糖" field="hb_sum" formatter="formatHuman" sortable width="100"/>
            <vxe-table-column title="充值(元)" field="pay_sum" formatter="formatHuman" sortable width="100"/>
            <vxe-table-column title="回馈(元)" field="cpl_sum" :formatter="['formatHuman', 1]" sortable width="100"/>
            <vxe-table-column title="新用户" field="is_new" width="70">
                <template slot-scope="scope">
                    <boolean-icon :data="scope.row.is_new"></boolean-icon>
                </template>
            </vxe-table-column>
            <vxe-table-column title="需绑定" field="need_bind" width="70">
                <template slot-scope="scope">
                    <boolean-icon :data="scope.row.need_bind"></boolean-icon>
                </template>
            </vxe-table-column>
            <vxe-table-column title="已绑定" field="is_bind" width="70">
                <template slot-scope="scope">
                    <boolean-icon :data="scope.row.is_bind"></boolean-icon>
                </template>
            </vxe-table-column>
            <vxe-table-column title="激活时间" field="active_at" width="140"/>
            <vxe-table-column title="更新时间" field="updated_at" width="140"/>
<!--            <vxe-table-column title="Flag" field="flagBit" min-width="100">-->
<!--                <template slot-scope="scope">-->
<!--                    <template v-if="scope.row.flagBit">-->
<!--                        <el-tag-->
<!--                            size="mini"-->
<!--                            type="danger"-->
<!--                            :key="index"-->
<!--                            v-for="(item, index) in options.flagBit"-->
<!--                            v-if="(scope.row.flagBit & item.value) === item.value">-->
<!--                            {{ item.label }}-->
<!--                        </el-tag>-->
<!--                    </template>-->
<!--                    <span v-else>-</span>-->
<!--                </template>-->
<!--            </vxe-table-column>-->
        </vxe-table>

        <el-pagination
            class="pull-right clearfix"
            background
            :current-page.sync="pageNo"
            :page-sizes="pageOptions.pageSizesList"
            :page-size="pageSize"
            :layout="pageOptions.layout"
            :total="totalDataNumber"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>

    </div>
</template>

<script>
import AccountInfo from '~/components/AccountInfo';

export default {
        components: {
            AccountInfo,
        },
        data() {
            return {
                search: {
                    player_id: '',
                    third_id: '',
                    timeField: '',
                    timeRange: [],
                    sortField: '',
                    sortValue: '',
                    status: 1,
                    flagBit: '',
                },
                loading: false,
                selected: [],
                tableData: [],
                pageNo: 1,
                pageSize: 20,
                totalDataNumber: 0,
                pageOptions: this.$store.state.backend.pageOptions,
                options: this.$store.state.user.options,
            }
        },
        computed: {
            maxHeight() {
                return this.$store.state.backend.windowInnerHeight - 250;
            },
        },
        methods: {
            handleSizeChange(val) {
                this.pageNo = 1;
                this.pageSize = parseInt(`${val}`);
                this.handleSearch();
            },
            handleCurrentChange(val) {
                this.pageNo = parseInt(`${val}`);
                this.handleSearch();
            },
            handleSelectionChange(val) {
                this.selected = val;
            },
            handleSearch() {
                this.loading = true;
                let filter = Object.assign({}, this.search, {
                    page: this.pageNo,
                    pageSize: this.pageSize,
                });
                // 简单去重
                if (filter.player_id) {
                    filter.player_id = Array.from(new Set(
                        filter.player_id.split('\n').filter(v=>v).filter(v => !isNaN(Number(v)))
                    ));
                }
                if (filter.third_id) {
                    filter.third_id = Array.from(new Set(
                        filter.third_id.split('\n').filter(v=>v).filter(v => !isNaN(Number(v)))
                    ));
                }

                this.$store.dispatch('user/CplUserRelation', filter).then(({data}) => {
                    this.$refs.xTable.reloadData(data.data)
                    // this.tableData = res.data.data;
                    this.totalDataNumber = data.meta.total;
                }).finally(() => {
                    this.loading = false;
                });
            },
            initData() {
                this.handleSearch();
            },
            // 自定义排序
            sortChange({column, prop, order}) {
                this.search.sortField = prop;
                this.search.sortValue = order ? (order.substr(0, 3) === 'asc' ? 'asc' : 'desc') : '';
                this.handleSearch();
            },
            exportExcel () {
                this.$refs.xTable.exportData({
                    filename: 'CPL用户数据',
                    type: 'xlsx'
                })
            },
        },
        created() {
            this.initData();
        }
    }
</script>

<style lang="scss" scoped>
.el-form-item {
    margin-bottom: 0 !important;
}
</style>

